<div class="layui-row">
  <div class="layui-col-lg2">
    <div class="layui-btn-group" id="device_handle_permi">
    <button class="layui-btn data_handle_btn">添加子用户</button>
    </div>
  </div>
  <div class="layui-col-lg3">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="search_key" lay-reqtext="请输入搜索内容" placeholder="用户名称/登录名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <a class="layui-btn" lay-submit="" lay-filter="data-search-btn">搜索</a>
            </div>
        </div>
    </form>
  </div>
</div>

<table class="layui-table" id="currentTableId" lay-filter="currentTableFilter"></table>
<script type="text/html" id="currentTableBar">
  <a class="layui-btn layui-btn-xs " lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-xs " lay-event="reset_pwd">重置密码</a>
</script>
<script type="text/html" id="user_count_status">
  <a class="" lay-event="user_count_status">
    <input value="{{d.status}}" type="checkbox"  name="user_count_status" lay-skin="switch" lay-event="" lay-text="启|停" {{ d.status == 'on' ? 'checked' : '' }}>
  </a> 
</script>

<!-- 添加数据表单开始 -->
<form  class="layui-form layui-form-pane " action="" id="handle_data_form" lay-filter="handle_data_form" style="padding: 10px;display: none;">

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">登录名</label>
      <div class="layui-input-block">
        <input type="text" name="username" lay-verify="required" lay-reqtext="必填项!" placeholder="登录用户名/不可更改" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">显示名</label>
      <div class="layui-input-inline">
        <input type="text" name="visible_name" autocomplete="off" placeholder="自定义名称" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">邮箱</label>
      <div class="layui-input-block">
        <input type="text" name="email" placeholder="邮箱"  autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">联系人</label>
      <div class="layui-input-block">
        <input type="text" name="contact" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">电话</label>
      <div class="layui-input-block">
        <input type="text" name="phone" placeholder="电话"  autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">备注</label>
      <div class="layui-input-inline">
        <input type="text" name="remark" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline" >
      <label class="layui-form-label layui-bg-green">权限</label>
      <div class="layui-input-inline">
        <input type="radio" name="kind" value="普通用户" title="普通用户" checked="">
        <input type="radio" name="kind" value="代理商" title="代理商">
      </div>
    </div>
  </div>

  <div class="layui-form-item" style="display: none;">
    <div class="layui-block" >
      <label class="layui-form-label layui-bg-green">刷新时间</label>
      <div class="layui-input-inline">
        <input type="text" name="refresh_time" value="60" autocomplete="off" placeholder="秒" class="layui-input">
      </div>
    </div>
     <div class="layui-block" >
      <label class="layui-form-label layui-bg-green">用户图标</label>
      <div class="layui-input-inline">
        <input type="text" name="user_icon" value="/static/img/default.png" autocomplete="off" placeholder="秒" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item" style="display: none;">
    <label class="layui-form-label layui-bg-green">报警声音</label>
    <div class="layui-input-block">
      <input type="checkbox" checked="" name="alarm_audio" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
    </div>
  </div>

  <div class="layui-form-item" style="display: none;">
    <label class="layui-form-label layui-bg-green">报警弹窗</label>
    <div class="layui-input-block">
      <input type="checkbox" checked="" name="alarm_show" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
    </div>
  </div>

  <button class="layui-btn layui-btn-fluid" id="add_submit_btn" lay-submit lay-filter="add_submit" >提交</button>
</form>

<!-- 添加数据表单结束 -->

<!-- 修改数据表单开始 -->

<form  class="layui-form layui-form-pane " action="" id="edit_data_form" lay-filter="edit_data_form" style="padding: 10px;display: none;">

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">登录名</label>
      <div class="layui-input-block">
        <input type="text" name="username" readonly="" lay-verify="required" lay-reqtext="必填项!" placeholder="登录用户名/不可更改" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">显示名</label>
      <div class="layui-input-inline">
        <input type="text" name="visible_name" autocomplete="off" placeholder="自定义名称" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">邮箱</label>
      <div class="layui-input-block">
        <input type="text" name="email" placeholder="邮箱"  autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">联系人</label>
      <div class="layui-input-block">
        <input type="text" name="contact" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">电话</label>
      <div class="layui-input-block">
        <input type="text" name="phone" placeholder="电话"  autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">备注</label>
      <div class="layui-input-inline">
        <input type="text" name="remark" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline" >
      <label class="layui-form-label layui-bg-green">权限</label>
      <div class="layui-input-inline">
        <input type="radio" name="kind" value="普通用户" title="普通用户" checked="">
        <input type="radio" name="kind" value="代理商" title="代理商">
      </div>
    </div>
  </div>
  <div class="layui-form-item" style="display: none;">
    <div class="layui-block" >
      <label class="layui-form-label layui-bg-green">刷新时间</label>
      <div class="layui-input-inline">
        <input type="text" name="refresh_time"  autocomplete="off" placeholder="秒" class="layui-input">
      </div>
    </div>
     <div class="layui-block" >
      <label class="layui-form-label layui-bg-green">用户图标</label>
      <div class="layui-input-inline">
        <input type="text" name="user_icon"  autocomplete="off" placeholder="秒" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item" style="display: none;">
    <label class="layui-form-label layui-bg-green">报警声音</label>
    <div class="layui-input-block">
      <input type="checkbox"  name="alarm_audio" lay-skin="switch"  lay-text="ON|OFF">
    </div>
  </div>

  <div class="layui-form-item" style="display: none;">
    <label class="layui-form-label layui-bg-green">报警弹窗</label>
    <div class="layui-input-block">
      <input type="checkbox"  name="alarm_show" lay-skin="switch"  lay-text="ON|OFF">
    </div>
  </div>

  <button class="layui-btn layui-btn-fluid" id="edit_submit_btn" lay-submit lay-filter="edit_submit" >提交</button>
</form>
<!-- 修改数据表单结束 -->

<script>


var ajax_url='user_manage';

// 图表展示
var table_show=function(table_data){
  table.render({
            elem: '#currentTableId',
            data: table_data,
            id:'customer_table',
            cols: [[
                {type: "checkbox", width: 20, fixed: "left"},
                {field: 'id',width:40, title: 'ID',templet:function(d){
                  return d.LAY_INDEX
                }},
                {field: 'username',width:140, title: '登录名'},
                {field: 'visible_name', title: '显示名'},
                {field: 'email', title: '邮箱'},
                {field: 'leader', title: '上级用户'},
                {field: 'subordinate', title: '子用户'},
                {field: 'character', title: '权限',templet:function(d){
                  var return_data=eval('('+d.character+')')
                  return return_data.kind
                }},
                {field: 'level', title: '联系方式',templet:function(d){
                  var return_data=eval('('+d.character+')')
                  return '联系人：'+return_data.contact+','+'电话：'+return_data.phone
                }},
                
                {field: 'remark', title: '备注'},
                {field: 'status', title: '账户状态',templet:'#user_count_status', align: "center"},
                {title: '操作', minWidth: 110, templet: '#currentTableBar', fixed: "right", align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true
    });

}

// 首次用户数据加载
table_show(user_data)
        
// 监听添加操作
$(".data_handle_btn").on("click", function () {
    document.getElementById("handle_data_form").reset();
    form.render();
    layer.open({
        type: 1
        ,area:'[600px,400px]'
        ,offset:'100px'  
        ,id: 'add_data' //防止重复弹出
        ,content:$('#handle_data_form')
        ,shade: 0 //不显示遮罩
      });
});


// 监听添加操作,并提交
form.on('submit(add_submit)',function(obj){
  if(obj.field.username.length<4){
    layer.msg('登录名至少4位')
    return false
  }
  var base_info=package_data(obj.field)
  console.log(base_info)
  base_info_ajax(base_info,ajax_url,'add',table_show)
  return false
})




table.on('tool(currentTableFilter)', function (obj) {
  form.render()
  var chose_data = obj.data;
  if (obj.event === 'edit') {
    // 电话号码和联系人
      document.getElementById("edit_data_form").reset();
      var character=eval('('+chose_data['character']+')')
      chose_data = $.extend(chose_data,character)
      form.val('edit_data_form',chose_data)
      layer.open({
      type: 1
      ,area:'[600px,400px]'
      ,offset:'100px'  //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
      ,id: 'add_data' //防止重复弹出
      ,content:$('#edit_data_form')
      ,shade: 0 //不显示遮罩
    });
  }else if(obj.event=='user_count_status'){

    console.log(chose_data)
    var text_show='确认停用该账号？'
    if(chose_data['status']==='off'){
        text_show='确认启用该账号？'
    }
    layer.confirm(text_show, function (index) {
      base_info_ajax(chose_data,ajax_url,'user_status',table_show)   
    });
  }else if(obj.event=='reset_pwd'){
    console.log(chose_data)
    var text_show='确认重置密码？'
    layer.confirm(text_show, function (index) {
      base_info_ajax(chose_data,ajax_url,'reset_pwd')
    });
  }

});

// 监听修改操作,并提交
form.on('submit(edit_submit)',function(obj){
  var base_info=package_data(obj.field)
  console.log(base_info)
  base_info_ajax(base_info,ajax_url,'edit',table_show)
  return false
})

//封装数据
var package_data=function(result){
  if(result.visible_name==''){
    result['visible_name']=result.username
  }
  var character={}
  character.kind=result.kind
  character.user_icon=result.user_icon
  character.refresh_time=result.refresh_time
  character.alarm_audio=result.alarm_audio
  character.alarm_show=result.alarm_show
  character.contact=result.contact
  character.phone=result.phone

  result['character']=JSON.stringify(character)
  delete result.contact
  delete result.phone
  delete result.kind 
  delete result.user_icon
  delete result.refresh_time
  delete result.alarm_audio
  delete result.alarm_show

  return result
}


// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {

    var search_key = data.field['search_key'];
    console.log(search_key)
    // 调用搜索函数
    if(search_key==''){
      table_show(user_data)
      return
    }
    var search_result=search_func(user_data,search_key,'username','visible_name')
    table_show(search_result)

    return false;
});
</script>